import React, { useCallback, useContext, useState } from "react"


const themes = {
  light :{
    foreground:"#000000",
    background:"#eeeeee"
  },
  dark:{
    foreground:'#ffffff',
    background:"#222222"
  }
}
const ThemeContext = React.createContext(themes.light)

function ThemedButton(){
  const theme = useContext(ThemeContext);
  return (
    <button style = {{background : theme.background , color:theme.foreground}}>
      I am styled by theme context
    </button>
  )
}

function Toolbar(){
  return (
    <div>
      <ThemedButton></ThemedButton>
    </div>
  )
}

export default function ThemeSwitch (){
  const [theme,setTheme] = useState("light")

  const toggleTheme = useCallback(()=>{
    setTheme((theme) => (theme === 'light'?"dark":"light"))
  },[])

  return (
    <ThemeContext.Provider value={themes[theme]}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <br />
      <br />
      <Toolbar/>
    </ThemeContext.Provider>
  )
}